
<!--库存查询明细-->
<template>
    <div class="page-box">
        <div class="page-search">
            <div>
                <label>单据类型</label>
                <el-select v-model="OrderTypeName" placeholder="请选择仓库" style="width: 160px;">
                    <el-option label="全部" value="全部"></el-option>
                    <el-option label="销售出库" value="销售出库"></el-option>
                    <el-option label="销售退货" value="销售退货"></el-option>
                    <el-option label="采购入库" value="采购入库"></el-option>
                    <el-option label="采购退货" value="采购退货"></el-option>
                    <el-option label="生产领料" value="生产领料"></el-option>
                    <el-option label="生产退料" value="生产退料"></el-option>
                    <el-option label="其他入库" value="其他入库"></el-option>
                    <el-option label="其他出库" value="其他出库"></el-option>
                    <el-option label="仓库调拨-调入" value="仓库调拨-调入"></el-option>
                    <el-option label="仓库调拨-调出" value="仓库调拨-调出"></el-option>
                </el-select>
            </div>
            <div>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
        </div>
        <div class="page-section">


            <!--表单-->
            <el-table :data="tableData"  ref="dataForm"   v-loading="isLoading"  height="360">
                <el-table-column  type="selection" width="55"></el-table-column>
                <el-table-column  prop="Id" label="单号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="OrderType" label="单据类型" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.OrderType == '销售退货' || scope.row.OrderType == '采购入库' || scope.row.OrderType == '其他入库' || scope.row.OrderType == '生产退料' || scope.row.OrderType == '仓库调拨-调入'">{{scope.row.OrderType}}</el-tag>
                        <el-tag type="warning" v-else>{{scope.row.OrderType}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column  prop="ItemCode" label="货品编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="ItemName" label="货品名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Price" label="单价" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Count" label="数量" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column  prop="Amount" label="金额" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
    

            
        </div>

   </div>


</template>

<script>

export default {
    props: {
        model: {
            require: true,
            type: Object,

        }
    },
    mounted(){
        this.dataBind();
    },
    data(){
        return{
            //单据类型名称
            OrderTypeName:'全部',


            //表单数据
            tableData:[],

            isLoading:false


        }
    },
    methods:{

        //查询
        search(){
            this.dataBind();
        },
        //重置查询输入框
        reset(){
            this.OrderTypeName='全部';
        },

        //获取数据
        dataBind(){
            this.isLoading=true;
            this.$http.get('/api/ItemStock/GetDetails',
            {
               params:{
                    WarehouseId:this.model.WarehouseId,
                    OrderTypeName:this.OrderTypeName,
                    ItemId:this.model.ItemId,
               }
            })
            .then(res=>{
                this.tableData=res.Data;
                this.isLoading=false;
            })
        },
    }

}
</script>
